<template>
    <div style="min-width: 829px">
        <!-- 收入报表 -->
        <div v-if="$route.path == '/remittanceList'">
            <div class="vs-search-box">
                <el-form v-search-box-enter ref="form" :inline="true" :model="paging" label-width="110px">
                    <el-form-item label="查询时间段：">
                        <el-date-picker v-model="bill_time_start" type="daterange" format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd" start-placeholder="开始时间" end-placeholder="结束时间"
                            style="width: 300px"> </el-date-picker>
                    </el-form-item>
                    <el-form-item class="vs-right-btns">
                        <el-button @click="reset">重置</el-button>
                        <el-button @click="handleCurrentChange(1)" type="primary">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="vs-table-box">
                <div class="operation-box clear-float">
                    <el-button type="primary" @click="add">新增打款</el-button>
                    <el-button type="primary" @click="submit">批量提交</el-button>
                    <el-button v-if="utils.getIsShopowner()" @click="exportFn" icon="el-icon-download" type="primary">导出
                    </el-button>
                </div>
                <!-- 多行合计 -->
                <el-table v-loading="loading" :data="tableData" header-row-class-name="has-gutter-table"
                    style="width: 100%" border ref="multipleTable" show-summary :summary-method="getSummaries">
                    <el-table-column type="selection" width="55" align="center" :selectable="selectable">
                    </el-table-column>
                    <el-table-column prop="id" label="序号" align="center"></el-table-column>
                    <el-table-column prop="create_time" label="日期" align="center"></el-table-column>
                    <el-table-column prop="money" label="打款全额" align="center"></el-table-column>
                    <!-- <el-table-column prop="balance" label="累计金额" align="center"></el-table-column> -->
                    <el-table-column prop="remark" label="备注" align="center"></el-table-column>
                    <el-table-column label="状态" align="center">
                        <template slot-scope="scope">
                            {{ scope.row.send_status == 0 ? '未提交' : '已提交' }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="out_trade_no" label="操作" align="center">
                        <template slot-scope="scope">
                            <el-button type="text" @click="setRow(scope.row)" v-if="!scope.row.send_status">删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- <div class="divTable">
                    <div>当日合计：{{day_sum}}</div>
                    <div>本月累计：{{month_sum}}</div>
                </div> -->
                <div class="vs-paging-box">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page.sync="paging.page" :page-size="paging.limit"
                        layout="total, sizes, prev, pager, next, jumper" :total="paging.total"
                        :page-sizes="[100, 200, 500, 1000]"> </el-pagination>
                </div>
            </div>
            <el-dialog title="" :visible.sync="dialogVisible" width="400px" destroy-on-close @close="formClose">
                <div slot="title">新增打款</div>
                <div>
                    <el-form ref="form" :model="form" label-width="80px" :rules="rules">
                        <el-form-item label="日期" prop="date">
                            <el-date-picker v-model="form.date" type="date" placeholder="请选择日期"
                                value-format="yyyy-MM-dd"> </el-date-picker>
                        </el-form-item>
                        <el-form-item label="打款全额" prop="money">
                            <el-input v-model="form.money" placeholder="请输入金额" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="备注">
                            <el-input v-model="form.remark" type="textarea" clearable placeholder="请输入备注"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
                <div slot="footer">
                    <el-button @click="formClose">取 消</el-button>
                    <el-button type="primary" @click="formSure">确 定</el-button>
                </div>
            </el-dialog>
        </div>
        <router-view></router-view>
    </div>
</template>

<script>
export default {
    data() {
        return {
            day_sum: 0,
            month_sum: 0,
            loading: false,
            dialogVisible: false,
            bill_time_start: [],
            paging: {
                page: 1,
                total: 0,
                limit: 100,
                year: '',
                month: '',
                day: '',
            },
            form: {
                date: '',
                money: '',
                remark: '',
            },
            rules: {
                date: [{ required: true, message: '请选择日期', trigger: 'blur' }],
                money: [{ required: true, message: '请输入金额', trigger: 'blur' }],
            },
            tableData: [],
        };
    },
    created() {
        if (this.$route.path == '/remittanceList') {
            this.paging.date_start = this.$moment().startOf('month').format('YYYY-MM-DD');
            this.paging.date_end = this.$moment(new Date()).format('YYYY-MM-DD');
            this.bill_time_start = [this.paging.date_start, this.paging.date_end];
            this.handleCurrentChange(1);
        }
    },
    methods: {
        // 导出
        async exportFn() {
            if (!this.bill_time_start) {
                this.bill_time_start = [];
            }
            this.paging.date_start = this.bill_time_start[0] || '';
            this.paging.date_end = this.bill_time_start[1] || '';
            let obj = Object.assign({}, this.paging);
            let url = this.utils.data.baseURL + 'store/finance/exportStoreRem';
            this.utils.urlToBlob(url, '汇款列表', obj);
        },
        getSummaries(param) {
            const { columns, data } = param;
            const sums = [];
            columns.forEach((column, index) => {
                if (index == 0) {
                    sums[index] = '合计';
                    return;
                }
                const values = data.map((item) => Number(item[column.property]));
                if (column.property == 'money' || column.property == 'balance') {
                    sums[index] = values.reduce((prev, curr) => {
                        const value = Number(curr);
                        if (!isNaN(value)) {
                            return prev + curr;
                        } else {
                            return prev;
                        }
                    }, 0);
                    sums[index] = sums[index].toFixed(2);
                } else {
                    sums[index] = '';
                }
            });
            return sums;
        },
        selectable(row, index) {
            if (row.send_status == 1) {
                return false;
            } else {
                return true;
            }
        },
        submit() {
            let data = this.$refs.multipleTable.selection;
            if (!data.length) {
                this.$message.warning('请至少选择一个选项');
                return false;
            }
            let ids = [];
            for (let item of data) {
                ids.push(item.id);
            }
            this.$confirm('选中的选项将会被提交, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(async () => {
                let { code, data } = await this.$Http.submitStoreRem({ ids: ids.join(',') });
                if (code) {
                    this.$message.success('提交成功');
                    await this.handleCurrentChange();
                }
            });
        },
        async formSure() {
            this.$refs['form'].validate(async (valid) => {
                if (!valid) return;
                let obj = Object.assign({}, this.form);
                console.log(this.logistics);
                let { code, data } = await this.$Http.setStoreRem(obj);
                if (code) {
                    this.dialogVisible = false;
                    this.$message.success(obj.id ? '修改成功!' : '添加成功!');
                    this.handleCurrentChange();
                }
            });
        },
        formClose() {
            this.dialogVisible = false;
            this.form.date = '';
            this.form.money = '';
            this.form.remark = '';
        },
        add() {
            this.dialogVisible = true;
        },
        async setRow(row) {
            this.$confirm('请注意，你确定要删除此汇款吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(async () => {
                let { code, data } = await this.$Http.delStoreRem({ id: row.id });
                if (code) {
                    if (this.tableData.length == 1) {
                        this.paging.page -= 1;
                        this.paging.page = this.paging.page < 1 ? 1 : this.paging.page;
                    }
                    this.$message.success('删除成功');
                    await this.handleCurrentChange();
                }
            });
        },
        async repairGetList() {
            if (!this.bill_time_start) {
                this.bill_time_start = [];
            }
            this.paging.date_start = this.bill_time_start[0] || '';
            this.paging.date_end = this.bill_time_start[1] || '';
            let obj = Object.assign({}, this.paging);
            this.loading = true;
            let { code, data } = await this.$Http.getStoreRem(obj);
            this.loading = false;
            if (code) {
                this.tableData = data.data;
                this.paging.total = data.total;
                // this.day_sum = data.day_sum
                // this.month_sum = data.month_sum
            }
        },
        reset() {
            //重置
            this.paging = this.$options.data().paging;
            this.handleCurrentChange(1);
        },
        handleSizeChange(val) {
            this.paging.limit = val;
            this.repairGetList();
        },
        handleCurrentChange(val) {
            this.paging.page = val;
            this.repairGetList();
        },
    },
};
</script>

<style lang="scss" scoped>
.divTable {
    width: 100%;

    div {
        border-bottom: 1px solid #ebeef5;
        border-left: 1px solid #ebeef5;
        border-right: 1px solid #ebeef5;
        height: 50px;
        line-height: 50px;
        padding-left: 30px;
    }
}

::v-deep {
    .el-dialog__header {
        border-bottom: 1px solid rgba($color: #000000, $alpha: 0.1);
    }
}

.image-thumbnail {
    width: 130px;
    height: 130px;
}

.divTableHead {
    width: 100%;

    div {
        border-top: 1px solid #ebeef5;
        border-left: 1px solid #ebeef5;
        border-right: 1px solid #ebeef5;
        height: 50px;
        line-height: 50px;
        text-align: center;
    }
}

.divTable {
    width: 100%;

    div {
        border-bottom: 1px solid #ebeef5;
        border-left: 1px solid #ebeef5;
        border-right: 1px solid #ebeef5;
        height: 50px;
        line-height: 50px;
        padding-left: 30px;
    }
}

table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed;

    td {
        border: 1px solid #ebeef5;
        text-align: center;
        height: 32px;
        color: #333333;
        padding: 0 5px;
        font-size: 14px;
    }
}
</style>
